<template>
    <div class="recommend">
        <div class="re-title">热门推荐</div>
        <ul>
            <li class="re-item" v-for="item of re_list" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <div class="re-info">
                    <p class="item-name">{{item.item_name}}</p>
                    <p class="item-info">{{item.item_info}}</p>
                    <button class="item-btn">查看详情</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'recommend',
    data () {
        return{
            re_list:[{
                id: '0001',
                imgUrl: 'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg',
                item_name: '金海湖风景区',
                item_info: '金海湖风景区sssssss',
            },{
                id: '0002',
                imgUrl: 'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg',
                item_name: '金海湖风景区',
                item_info: '金海湖风景区sssssss',
            },{
                id: '0003',
                imgUrl: 'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg',
                item_name: '金海湖风景区',
                item_info: '金海湖风景区sssssss',
            },{
                id: '0004',
                imgUrl: 'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg',
                item_name: '金海湖风景区',
                item_info: '金海湖风景区sssssss',
            }
            ]
        }
    }
}
</script>

<style scoped>
.re-title{
    line-height: 40px; 
    background: #eee;
    text-indent: 20px;
    margin-top: 20px;
}
.re-item {
    display: flex;
    height: 100px;
    overflow: hidden;
    margin-bottom: 20px;
}
.re-item img{
    width:100px;
    height: 100px;
}
.re-info{
    /* line-height: 100px; */
    flex: 1;
    padding: 10px;
}
.item-name{
    font-size: 20px;
    line-height: 44px;
    height: 44px;

}
.item-info{
    color: #bbb;
}
.item-btn{
    background: orange;
    border-radius: 5px;
    /* margin-top: 5px; */
    padding: 0px 6px;
    line-height: 27px;
    height: 27px;
    color: #eee;
    font-size: 15px;
    border: 0;
}

</style>


